Scrolling position

#code/javascript

https://codepen.io/makzan/details/5c139a219d6e7341481372bf42ed59c7

$(window).on('scroll', function() {
  var totalY = $(document).height() - $(window).height() - $("footer").height();
  var progress = Math.min(100, Math.round(window.scrollY / totalY * 100));
  $("#output").text(progress);
  $("#progress-bar").attr('value', progress);
  
  var framesTop = $("#scroll-frames").offset().top;
  var framesDiff = window.scrollY - framesTop;
  if (framesDiff > -250 && framesDiff < 100) {
    var normalized = 255 - Math.round((framesDiff + 200) / 300 * 255); // 0-255
    $("#scroll-frames").text(normalized).css('background', `rgb(${normalized},${normalized},${normalized})`);
  }
});